<template>
	<div class="mui-numbox" data-numbox-min='1'>
		<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
		<input id="test" class="mui-input-numbox" type="number" value="1" @change='countChanged' ref='numbox' />
		<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
	</div>
</template>

<script>
	// 导入mui js文件
	import mui from '../../lib/mui/js/mui.min.js'

	export default {
		mounted() {
			// 初始化数字选择框组件
			mui(".mui-numbox").numbox();
			// 此时父组件传递过来的商品库存数量 max 是 undefined ,因为这个值父组件是通过远程获取的，是一个 function ，需要等主程序执行完后，才回去执行这个队列的异步操作，所以里面还没有获取到请求的数据，结果是空没有定义
			// 问题：我们不知道什么时候能够拿到 max 值，但是总归有一刻会拿到这个max值
			// 我们可以使用 watch 属性监听，来监听父组件传递过来的 max 值，不管 watch 会触发几次，但是最后一次肯定是一个合法的 max 数值
			// console.log(this.max);
		},
		methods: {
			countChanged() {
				// console.log(this.$refs.numbox.value);
				// 每当文本框的数值被修改的时候，会立即把最新数据通过事件调用传递给父组件
				this.$emit('getcount', parseInt(this.$refs.numbox.value));
			}
		},
		props: ["max"],
		watch: {
			// 属性监听
			max: function(newVal, oldVal) {
				// 使用 JS API 设置 numbox 的最大值
				mui(".mui-numbox").numbox().setOption('max', newVal);
			}
		}
	}
</script>

<style lang="scss" scoped>
	
</style>